<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Dojo is Fun</title>

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"
            data-dojo-config="async: true"></script>
</head>
<body>

	<!-- Dojo Mouse's Events -->
	<!-- 
	<button id = "myButton">Click Me !</button>
	<div id = "myDiv"> hover over me</div>
	<script>
		require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse){
			var myButton = dom.byId("myButton"), myDiv = dom.byId("myDiv");
			
			var handle = on(myButton,"click",function(evt){
				domStyle.set(myDiv,"backgroundColor","red");
				handle.remove();
			});
			
			on(myButton, mouse.enter , function(evt){
				domStyle.set(myDiv,"backgroundColor","green");
			});
			
			on(myButton,mouse.leave,function(evt){
				domStyle.set(myDiv,"backgroundColor","white");
			});
		});
	</script>
	 -->
	
	<!-- Dojo Keybord's Events -->
	
		press any Key :<input type = "text" id = "keyCode" size = "2"><div id = "myDiv"></div>
		press any Key :<input type = "text" id = "keyCode2" size = "2">
		
		<script>
			require(["dojo/dom-construct","dojo/on","dojo/query","dojo/keys","dojo/domReady!"],function(domConstruct,on,query,keys){
				
				var list = query("input");
				
				on(list,"keydown",function(evt){
					switch(evt.keyCode){
						case keys.UP_ARROW:
							evt.preventDefault();
						console.log("up arrow has been pressed");
						break;
						
						case keys.DOWN_ARROW:
							evt.preventDefault();
						console.log("down arrow has been pressed");
						break;
						
						default:
						console.log("Other Key has been pressed : "+evt.keyCode);
					}
				});
				
			});
		</script>
</body>
</html>